<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="RevampModalObj.isShow">
      <div class="modal-ctrl-main even-row-ctrl">

        <div class="modal-title">
          <p>
            {{ isDetailsModal ? '查看预案详情' : '修改预案信息' }}
            <a v-show="isDetailsModal" @click="caseExport" style="text-decoration: underline;color: #31b0d5;" class="f-r">导出</a>
          </p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">

            <p class="title">预案基本信息</p>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                案件类型：
              </div>
              <select :disabled="isDetailsModal" @change="caseTypeListFn" v-model="paramsData.caseType">
                <option value="">请选择案件类型</option>
                <option v-for="item in caseTypeList" :value="item.id">{{item.name}}</option>
              </select>
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l ">
                现场情形：
              </div>
              <input
                :readonly="isDetailsModal"
                type="text" v-model="paramsData.fieldSituation"
                maxlength="20"
                :placeholder=" isDetailsModal ? '' : '最长20个字符'"
                class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                案件性质：
              </div>
              <select :disabled="isDetailsModal" @change="caseNatureListFn" v-model="paramsData.caseNature">
                <option value="">请选择案件性质</option>
                <option v-for="item in caseNatureList" :value="item.id">{{item.name}}</option>
              </select>
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l ">
                所需资源：
              </div>
              <div class="select-input-checkbox f-l"
                   :title="'已选择的物资：' + resourceText">
                {{resourceText}}
                <i @click="isResourceShowFn" class="select-btn glyphicon"
                   :title="isResourceShow?'收起物资列表':'展开物资列表'"
                   :class="{'glyphicon-arrow-down':!isResourceShow,'glyphicon-arrow-up':isResourceShow}">
                </i>
              </div>
              <transition
                name="custom-classes-transition"
                enter-active-class="animated fadeInUp"
                leave-active-class="animated fadeOutDown"
              >
                <div class="select-resource-body" v-show="isResourceShow">
                  <p>已经选{{ activeResourceList.length }}个物资</p>
                  <ul>
                    <li
                      v-for="item in resourceList"
                      :class="{active: item.isChecked}"
                      @click="activeResourceFn(item)"
                      :id="item.id">
                      <input :checked="item.isChecked"  type="checkbox">
                      {{ item.name }}
                    </li>
                  </ul>
                </div>
              </transition>

            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                性质细分：
              </div>
              <select :disabled="isDetailsModal" @change="caseNatureDetailsFn" v-model="paramsData.natureDetails">
                <option value="">{{ isDetailsModal ? "无" : "请选择性质细分" }}</option>
                <option v-for="item in natureDetailsList" :value="item.id">{{item.name}}</option>
              </select>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                专家组：
              </div>
              <select :disabled="isDetailsModal" @change="selectSpecialistArrFn" v-model="paramsData.expertsType">
                <option value="">请选择专家组</option>
                <option v-for="item in SpecialistArrList" :value="item.id">{{item.groupName}}</option>
              </select>
            </div>

            <div class="clear-float"></div>

            <p class="title">
              预案步骤
            </p>

            <!--按钮组-->
            <div class="Btns-ctrl-body" v-show="!isDetailsModal">
              <div class="btns f-l">
                <button type="button" class="btn btn-info" @click="CaseOrderModal('新增预案步骤信息')">新增</button>
                <button type="button" class="btn btn-info" @click="caseOrderSort('up')">上移</button>
                <button type="button" class="btn btn-info" @click="caseOrderSort('down')">下移</button>
                <button type="button" class="btn btn-warning" @click="CaseOrderModal('修改预案步骤信息')">修改</button>
                <button type="button" class="btn btn-danger" @click="deleteCaseOrderFn">删除</button>
              </div>
            </div>
            <!--按钮组-->

            <!--表格组-->
            <div class="table-ctrl">
              <!--表格头-->
              <!--{{treeTableRow}}-->
              <div class="table-header">
                <table class="table-default">
                  <thead>
                  <tr>
                    <th width="50">步骤</th>
                    <th v-for="(ths,thsIndex) in tableHeader" :width="thsIndex===1?'400px':'auto'">
                      {{ths.value}}
                    </th>
                  </tr>
                  </thead>
                </table>
              </div>
              <!--表格中部-->
              <div class="table-overflowX">
                <table class="table-default">
                    <tbody>
                      <tr
                        v-for="(trs,index) in paramsData.benchmarkStepModelList"
                        @click="selectRow(trs,index)"
                        :class="{active: index === isActive}"
                      >
                        <td width="50">{{index+1}}</td>
                        <td
                          v-for="(tds,tdIndex) in tableHeader"
                          :key="tdIndex"
                          :width="tdIndex===1?'400px':'auto'"
                          :title="[trs,tds.key] | caseTypeFilter">
                          {{[trs,tds.key] | caseTypeFilter}}
                        </td>

                      </tr>
                    </tbody>
                </table>
              </div>

            </div>
            <!--表格组-->

            <!--注意事项-->
            <div class="title clear-true">
              <span class="f-l">注意事项{{ isDetailsModal ? "" : "(上传附件最多三个)" }}</span>
              <div class="f-r">
                <div class="f-l">
                  <div class="file-list-body">
                     <div class="file-list" v-for="(item,index) in matterFilListArr" :title="item.name">
                       <i class="remove-file glyphicon glyphicon-remove" v-show="!isDetailsModal" @click="selectFilListDeleteFn(index,'matter')"></i>
                       <img :src="'static/img/'+ item.type +'.png'" alt="">
                       <p>{{ item.name }}</p>
                       <a @click="downloadFile(item)" v-show="item.id!==''">下载附件</a>
                     </div>
                  </div>
                </div>
                <div class="file-select-body f-l" v-show="!isDetailsModal">
                  <input type="file" @change="selectFile($event,'matter')" name="photo" ref="formFileMatter">
                  <span class="photo-btn">选择附件</span>
                </div>
              </div>
            </div>
            <textarea :readonly="isDetailsModal" v-model="paramsData.attention" :placeholder="isDetailsModal ? '' : '选填(最大120个字符)' " maxlength="120" class="text-class text-default"></textarea>

            <!--注意事项-->
            <div class="title clear-true">
              <span class="f-l">执法依据{{ isDetailsModal ? "" : "(上传附件最多三个)" }}</span>
              <div class="f-r">
                <div class="f-l">
                  <div class="file-list-body">
                    <div class="file-list" v-for="(item,index) in accordingFilListArr" :title="item.name">
                      <i class="remove-file glyphicon glyphicon-remove" v-show="!isDetailsModal" @click="selectFilListDeleteFn(index,'according')"></i>
                      <img :src="'static/img/'+ item.type +'.png'" alt="">
                      <p>{{ item.name }}</p>
                      <a @click="downloadFile(item)" v-show="item.id!==''">下载附件</a>
                    </div>
                  </div>
                </div>
                <div class="file-select-body f-l" v-show="!isDetailsModal">
                  <input type="file" @change="selectFile($event,'according')" name="photo" ref="formFileAccording">
                  <span class="photo-btn">选择附件</span>
                </div>
              </div>
            </div>
            <textarea :readonly="isDetailsModal" v-model="paramsData.lawBasis" :placeholder="isDetailsModal ? '' : '选填(最大120个字符)'" maxlength="120" class="text-class text-default"></textarea>

          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="closeRoleModal">{{ isDetailsModal ? "关闭" : "取消" }}</button>
          <button type="button" class="btn btn-info" :disabled="subBtnState" v-show="!isDetailsModal" @click="subFile">确定</button>
        </div>
      </div>

      <!--新增步骤-->
      <transition
        name="custom-classes-transition"
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutUp"
      >
        <div class="modal-ctrl-body" v-show="CaseOrderObj.isShow">
          <div class="modal-ctrl-main odd-row-ctrl">

            <div class="modal-title">
              <p>{{ CaseOrderObj.title }}</p>
            </div>
            <div class="modal-ctrl-content">
              <div class="modal-row" >
                <div class="modal-form-key f-l indispensable ">
                  简化说明：
                </div>
                <input type="text" maxlength="20" v-model="addCaseOrder.simpleDescription"  placeholder="最长20个字符" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l ">
                  详细说明：
                </div>
                <textarea placeholder="选填" maxlength="300" v-model="addCaseOrder.detailedDescription" class="modal-text f-l caseTips"></textarea>
              </div>

              <div class="modal-row">
                <div class="modal-form-key f-l indispensable">
                  类型：
                </div>
                <select @change="selectCaseOrder" :value="addCaseOrder.type">
                  <option value="-1">请选择类型</option>
                  <option value="tips">提示</option>
                  <option value="mustdo">必做</option>
                </select>
              </div>
            </div>
            <div class="btns text-r">
              <button type="button" class="btn btn-default" @click="clearCaseOrder">取消</button>
              <button type="button" class="btn btn-info" @click="addCaseOrderFn">确定</button>
            </div>
            <!--{{userDetailsModal.obj}}-->
          </div>
        </div>
      </transition>

    </div>
  </transition>
</template>

<script>
    export default {
        name: "RevampCaseListModal",
        props:["RevampModalObj","selectRowId","isDetailsModal"],
        data(){
          return{
            paramsData:{
              "id":"",
              "attention": "",
              "attentionFile": "",
              "benchmarkStepModelList": [],
              "caseNature": "",
              "caseType": "",
              "createUser": "",
              "emergencyFacilityModelList": [],
              "fieldSituation": "",
              "lawBasis": "",
              "lawBasisFile": "",
              "natureDetails": "",
              "expertsType": "",
            },
            matterFilListArr:[],//文件集合
            accordingFilListArr:[],//执法依据
            resourceList:[],//物资列表
            activeResourceList:[],//步骤列表
            caseTypeAll:[],//类型集合体
            caseTypeList:[],//一级类型
            caseNatureList:[],//二级类型
            natureDetailsList:[],//三级类型
            isResourceShow:false,
            matterReady: false, //注意事项上传是否准备
            accordingReady: false, //执法依据上传是否准备
            isActive:-1,
            selectRowObj:{},
            subBtnState:false,
            tableHeader:[
              {"key":"simpleDescription","value":"简化说明"},
              {"key":"detailedDescription","value":"详细说明"},
              {"key":"type","value":"类型"},
            ],
            tableRow:[],
            addCaseOrder:{
              simpleDescription:"",
              detailedDescription:"",
              type:"-1",
              stepOrder:0
            },
            CaseOrderObj:{
              isShow:false,
              title:"新增预案步骤"
            },
            SpecialistArrList:[],
          }
        },
        watch:{
          RevampModalObj:{
            deep:true,
            handler(v1){
              if( v1.isShow ){
                //预案物资
                this.getCaseResourceData();
                //案件类型
                this.getCaseType();
                //预案步骤
                //this.getCaseOrderData();
                this.getSpecialistArr();
              }
            }
          }
        },
        methods:{
          //预案数据
          getCaseObjData(){
            //GET /benchmark/info/{id}
            this.$axios.get(this.HOST+"/benchmark/info/"+this.selectRowId)
              .then(res=>{
                //console.log(res);
                let successData = res.data.data;

                for( let paramsKey in this.paramsData ){
                  for( let successKey in successData ){
                    if( paramsKey === successKey ){
                      if( successKey === "benchmarkStepModelList" ){ //预案步骤
                        this.paramsData.benchmarkStepModelList = this.JPtool.ascendingSort(successData[successKey],'stepOrder')
                      }else if( successKey === "attentionFile" && successData[successKey] ){ //注意事项文件
                        this.matterFilListArr = JSON.parse(successData[successKey]);
                      }else if( successKey === "lawBasisFile" && successData[successKey] ){ //执法依据文件
                        this.accordingFilListArr = JSON.parse(successData[successKey]);
                      }else{
                        this.paramsData[paramsKey] = successData[successKey];
                      }
                    }
                  }
                }

                //获取预案案件类型
                let caseTypeId = successData.caseType;
                let caseNatureId = successData.caseNature;
                let natureDetailsId = successData.natureDetails;
                for( let i=0;i<this.caseTypeAll.length;i++ ){
                  if( this.caseTypeAll[i].parentId === caseTypeId ){
                    this.caseNatureList.push(this.caseTypeAll[i]);
                  }else if( this.caseTypeAll[i].parentId === caseNatureId ){
                    this.natureDetailsList.push(this.caseTypeAll[i]);
                  }
                }
                this.paramsData.natureDetails = this.paramsData.natureDetails ? this.paramsData.natureDetails : "";

                //预案物资
                //console.log(this.resourceList);
                for( let i=0;i<this.resourceList.length;i++ ){
                  for( let k=0;k<successData.emergencyFacilityModelList.length;k++ ){
                    if( successData.emergencyFacilityModelList[k] && this.resourceList[i].id === successData.emergencyFacilityModelList[k].id ){
                      this.resourceList[i].isChecked = true;
                    }
                  }
                }
                for( let k=0;k<successData.emergencyFacilityModelList.length;k++ ){
                  if( successData.emergencyFacilityModelList[k] ){
                    this.activeResourceList.push(successData.emergencyFacilityModelList[k]);
                  }
                }

              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //专家组列表
          getSpecialistArr(){
            //console.log(alert(1));
            //GET /benchmark/expertsgroup/selectAll
            this.$axios.get(this.HOST+"/benchmark/expertsgroup/selectAll")
              .then((data)=>{
                //console.log(data);
                console.log(data);
                this.SpecialistArrList = data.data;
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //预案物资列表
          getCaseResourceData(){
            let params = {
              "columns": ["*"],
              "conditions": [],
              "dataTypeCode": "pointresource",
              "pageIndex": 1,
              "pageSize": 20,
              "tableName": "T_EMERGENCY_FACILITY",
              "sorters":[
                {
                  "order": "asc",
                  "sortField": "CREATE_TIME"
                }
              ]
            };
            this.$axios.post(this.HOST+"/base/query/page",params)
              .then(res=>{
                //console.log(res);
                let successData = res.data.data.list;
                for( let i=0;i<successData.length;i++ ){
                  this.resourceList.push({
                    name:successData[i].NAME,
                    id:successData[i].ID,
                    isChecked:false,
                    num:successData[i].NUM,
                  });
                }
                //console.log(this.resourceList);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //预案步骤列表
          getCaseOrderData(){
            this.$axios.get(this.HOST+"/benchmark/step",{
              params:{
                type:"default"
              }
            })
              .then(res=>{
                //console.log(res);
                //this.tableRow = res.data;
                this.paramsData.benchmarkStepModelList = res.data.data;
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //选择预案步骤
          selectRow(obj,index){
            //console.log(obj);
            ////console.log(index);
            this.isActive = index;
            this.selectRowObj = obj;
          },
          //选择专家组
          selectSpecialistArrFn(ele){
            this.paramsData.expertsType = ele.target.value;
          },
          //选择预案物资
          activeResourceFn(obj){
            obj.isChecked = !obj.isChecked;
            //console.log(obj);
            if( obj.isChecked ){
              this.activeResourceList.push(obj);
            }else{
              for( let i=0;i<this.activeResourceList.length;i++ ){
                if( this.activeResourceList[i].id === obj.id ){
                  this.activeResourceList.splice(i,1);
                }
              }
            }
            //console.log(this.activeResourceList);
            let resourceArr = [];
            for( let i=0;i<this.activeResourceList.length;i++ ){
              resourceArr.push({
                'id':this.activeResourceList[i].id,
                'num':this.activeResourceList[i].num,
                'name':this.activeResourceList[i].name,
              })
            }
            //console.log(resourceArr);
            this.paramsData.emergencyFacilityModelList = resourceArr;
          },
          //物资选择显示与隐藏
          isResourceShowFn(){
            if(this.isDetailsModal){
              return false;
            }
            this.isResourceShow = !this.isResourceShow;
          },
          //新增预案步骤
          addCaseOrderFn(){
            ////console.log(this.addCaseOrder);
            if( this.verifyForm.isNull(this.addCaseOrder.simpleDescription) ){
              this.s_alert("预案步骤简介不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.addCaseOrder.type) ){
              this.s_alert("预案步骤类型不能为空！");
              return false;
            }


            if( this.isActive === -1 ){ //新增
              this.paramsData.benchmarkStepModelList.push({
                simpleDescription:this.addCaseOrder.simpleDescription,
                detailedDescription:this.addCaseOrder.detailedDescription,
                type:this.addCaseOrder.type,
              });
            }else{ //修改
              this.paramsData.benchmarkStepModelList[this.isActive] = this.addCaseOrder;
            }

            this.clearCaseOrder();
          },
          //选择预案类型
          selectCaseOrder(ele){
            ////console.log(ele.target.value);
            this.addCaseOrder.type = ele.target.value;
          },
          //预案步骤缓存清除
          clearCaseOrder(){
            this.addCaseOrder={
              simpleDescription:"",
              detailedDescription:"",
              type:"-1"
            };
            this.CaseOrderObj.isShow = !this.CaseOrderObj.isShow;
            this.clearSelect();
          },
          //预案步骤弹出窗口
          CaseOrderModal(title){
            ////console.log(this.selectRowObj);

            if( title === "修改预案步骤信息" ){
              if( this.isActive !== -1 ){
                if( this.selectRowObj.type === "default" ){
                  this.s_alert("不可修改默认步骤！");
                  this.selectRowObj = {};
                  this.isActive = -1;
                  return false;
                }
                for( let addKey in this.addCaseOrder ){
                  for( let selectKey in this.selectRowObj ){
                    if( addKey === selectKey ){
                      this.addCaseOrder[addKey] = this.selectRowObj[selectKey]
                    }
                  }
                }
                //console.log(this.addCaseOrder);
              } else{
                this.s_alert("请选择需要修改的预案步骤！");
                return false;
              }
            }else{
              this.clearSelect();
            }
            this.CaseOrderObj.isShow = !this.CaseOrderObj.isShow;
            this.CaseOrderObj.title = title;

          },
          //删除预案步骤
          deleteCaseOrderFn(){
            if( this.selectRowObj.type === "default" ){
              this.s_alert("默认步骤不可删除！");
             return false;
            }

            if( this.isActive !== -1 ){
              let msg = confirm("请问是否要删除该步骤？");
              if( msg ){
                //console.log(this.isActive);
                this.paramsData.benchmarkStepModelList.splice(this.isActive,1);
                this.clearSelect();
              }
            }else{
              this.s_alert("请选择需要删除的步骤！")
            }

          },
          //预案步骤排序
          caseOrderSort(direction){
            if( this.isActive !== -1 ){
              if( direction === "up" ){ //上移动
                let index = this.isActive-1;
                ////console.log(index);
                if( index >= 0 ){
                  this.caseOrderSortFn(index);
                  this.isActive--;
                }else {
                  this.s_alert("已经为最先执行步骤，不可再提前！");
                }
              }else if( direction === "down" ){//下移动
                let maxLen = this.paramsData.benchmarkStepModelList.length;
                let index = this.isActive+1;
                if( index < maxLen ){
                  this.caseOrderSortFn(index);
                  this.isActive++;

                }else {
                  this.s_alert("已经为最末执行步骤，不可再延后！");
                }
              }
            }else{
              this.s_alert("请选择需要移动的预案步骤");
            }
          },
          caseOrderSortFn(num){
            let caseOrderSplice = this.paramsData.benchmarkStepModelList.splice(this.isActive,1);
            this.paramsData.benchmarkStepModelList.splice(num,0,caseOrderSplice[0]);
          },
          //获取案件类型
          getCaseType(){
            //GET /benchmark/caseType
            this.$axios.get(this.HOST+"/benchmark/caseType")
              .then(res=>{
                //console.log(res);
                this.caseTypeAll = res.data.data;
                for( let i=0;i<this.caseTypeAll.length;i++ ){
                  switch (this.caseTypeAll[i].type){
                    case "case_type": //一级类型
                      this.caseTypeList.push(this.caseTypeAll[i]);
                      break;
               /*     case "case_nature": //二级类型
                      this.caseNatureList.push(this.caseTypeAll[i]);
                      break;
                    case "nature_details": //三级类型
                      this.natureDetailsList.push(this.caseTypeAll[i]);
                      break;*/
                  }
                }
                //获取预案数据
                this.getCaseObjData();
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //一级类型选择
          caseTypeListFn(ele){
            this.paramsData.caseType = ele.target.value;
            let caseTypeId = ele.target.value;
            let caseListArr = [];//二级类型集合
            for( let i=0;i<this.caseTypeAll.length;i++ ){ //二级赋值赋值
              if( this.caseTypeAll[i].parentId && this.caseTypeAll[i].parentId === caseTypeId ){
                caseListArr.push(this.caseTypeAll[i]);
              }
            }
            this.caseNatureList = caseListArr;
            this.paramsData.caseNature = ""; //清空二级类型
            this.paramsData.natureDetails = ""; //清空三级类型
            this.natureDetailsList = []; //清空三级类型列表
          },
          //二级类型选择
          caseNatureListFn(ele){
            //console.log(ele.target.value);
            this.paramsData.caseNature = ele.target.value;
            let caseTypeId = ele.target.value;
            let caseListArr = [];//二级类型集合
            for( let i=0;i<this.caseTypeAll.length;i++ ){ //三级类型赋值
              if( this.caseTypeAll[i].parentId && this.caseTypeAll[i].parentId === caseTypeId ){
                caseListArr.push(this.caseTypeAll[i]);
              }
            }
            //三级类型赋值
            this.natureDetailsList = caseListArr;
            this.paramsData.natureDetails = ""; //清空三级类型
          },
          //三级类型
          caseNatureDetailsFn(ele){
            this.paramsData.natureDetails = ele.target.value;
          },
          //提交上传文件
          subFile(){
            let _this = this;

            //console.log(this.matterFilListArr);
            if( this.matterFilListArr.length === 0 ){
              this.matterReady = true;
              this.subForm();
            }else{
              this.subBtnState = true;
              matterForSubFile(0);
              //注意事项
              function matterForSubFile(i){
                if( i < _this.matterFilListArr.length && _this.matterFilListArr[i].id  ){
                  i++;
                  matterForSubFile(i);
                  return false;
                }else if( _this.matterFilListArr[i]){
                  let param = new FormData();
                  param.append('file',_this.matterFilListArr[i].obj);//通过append向form对象添加数据
                  //console.log(_this.matterFilListArr);
                  let configFile = {
                    headers:{'Content-Type':'multipart/form-data'}
                  };
                  _this.$axios.post(baseURL+"api/jp-TIFS-FileCenter-ms/file",param,configFile)
                    .then((data)=>{
                      //alert("上传成功！");
                      //console.log(data.data.fileID);
                      _this.matterFilListArr[i].id = data.data.fileID;
                      i++;
                      if( i < _this.matterFilListArr.length ){
                        matterForSubFile(i);
                      }else{
                        //console.log(_this.matterFilListArr);
                        _this.matterReady = true;
                        _this.subForm();
                      }
                    })
                    .catch((err)=>{
                      _this.s_alert("上传失败！");
                      //console.log(err);
                    });
                }else if( i === _this.matterFilListArr.length ){ //无文件修改
                  _this.matterReady = true;
                  _this.subForm();
                }

              }
            }

            if( this.accordingFilListArr.length === 0 ){
              this.accordingReady = true;
              this.subForm();
            }else{
              this.subBtnState = true;
              accordingForSubFile(0);  //执法依据
              function accordingForSubFile(i){
                if( i < _this.accordingFilListArr.length && _this.accordingFilListArr[i].id ){
                  i++;
                  accordingForSubFile(i);
                  return false;
                }else if(_this.accordingFilListArr[i]){
                  let param = new FormData();
                  param.append('file',_this.accordingFilListArr[i].obj);//通过append向form对象添加数据
                  //console.log(_this.accordingFilListArr);
                  let configFile = {
                    headers:{'Content-Type':'multipart/form-data'}
                  };
                  _this.$axios.post(baseURL+"api/jp-TIFS-FileCenter-ms/file",param,configFile)
                    .then((data)=>{
                      //alert("上传成功！");
                      //console.log(data.data.fileID);
                      _this.accordingFilListArr[i].id = data.data.fileID;
                      i++;
                      if( i < _this.accordingFilListArr.length ){
                        accordingForSubFile(i);
                      }else{
                        _this.accordingReady = true;
                        _this.subForm();
                      }
                    })
                    .catch((err)=>{
                      _this.s_alert("上传失败！");
                      //console.log(err);
                    });
                }else if( i === _this.accordingFilListArr.length ){ //无文件修改
                  _this.accordingReady = true;
                  _this.subForm();
                }
              }
            }

          },
          //提交表单
          subForm(){
            //只有注意事项与执法依据文件上传完成才能够开始提交表单
            //console.log(this.matterFilListArr);
            //console.log(this.accordingFilListArr);
            //console.log(this.matterReady);
            //console.log(this.accordingReady);

            if( this.matterReady === false || this.accordingReady === false ){
              return false;
            }
            //this.s_alert("上传文件成功",2000);
            this.paramsData.createUser = this.isLogin().userId;
            for( let i=0;i<this.paramsData.benchmarkStepModelList.length;i++ ){
              this.paramsData.benchmarkStepModelList[i].stepOrder = (i+1)
            }

            //注意事项赋值
            if( this.matterFilListArr.length > 0 ){
              let matterArr = [];
              for( let i=0;i<this.matterFilListArr.length;i++ ){
                let matterObj = {
                  id:this.matterFilListArr[i].id,
                  name:this.matterFilListArr[i].name,
                  type:this.matterFilListArr[i].type
                };
                matterArr.push(matterObj)
              }
              this.paramsData.attentionFile = JSON.stringify(matterArr);
            }

            //执法依据赋值
            if( this.accordingFilListArr.length > 0 ){
              let accordingArr = [];
              for( let i=0;i<this.accordingFilListArr.length;i++ ){
                let accordingObj = {
                  id:this.accordingFilListArr[i].id,
                  name:this.accordingFilListArr[i].name,
                  type:this.accordingFilListArr[i].type
                };
                accordingArr.push(accordingObj)
              }
              this.paramsData.lawBasisFile = JSON.stringify(accordingArr);
            }

            if( this.verifyForm.isNull(this.paramsData.caseType) ){
              this.s_alert("案件类型不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.paramsData.caseNature) ){
              this.s_alert("案件性质不能为空！");
              return false;
            }
            this.subBtnState = true;
            //PUT /benchmark/info
            this.paramsData.id = this.selectRowId;
            this.paramsData.lawBasis = this.paramsData.lawBasis ? this.paramsData.lawBasis : "";
            this.paramsData.lawBasisFile = this.paramsData.lawBasisFile ? this.paramsData.lawBasisFile : "";
            this.paramsData.attention = this.paramsData.attention ? this.paramsData.attention : "";
            this.paramsData.attentionFile = this.paramsData.attentionFile ? this.paramsData.attentionFile : "";
            //console.log(this.paramsData);
           // return false;
            this.$axios.put(this.HOST+"/benchmark/info",this.paramsData)
              .then(res=>{
                //console.log(res);
                if( res.data.success ){
                  this.s_alert("修改预案成功！");
                  this.closeRoleModal();
                }else {
                  this.s_alert("修改预案失败！");
                }
                this.subBtnState = false;
              })
              .catch(err=>{
                this.s_alert("修改预案失败！");
                this.matterReady = false;
                this.accordingReady =  false;
                //console.log(err);
                this.subBtnState = false;
              })
          },
          clearSelect(){
            this.isActive = -1;
            this.selectRowObj = {};
          },
          //选择文件
          selectFile(ele,selectType){
            //matter 注意事项 according执法依据
            if( (selectType === "matter" && this.matterFilListArr.length >= 3) || (selectType === "according" && this.accordingFilListArr.length >= 3) ){
              this.s_alert("最多只能上传三个文件！");
              this.$refs.formFileMatter.value = "";
              this.$refs.formFileAccording.value = "";
              return false;
            }
            //console.log(ele.target.files[0]);
            let typeArr = ele.target.files[0].name.split(".");
            let fileType = typeArr[typeArr.length - 1];
            if( this.verifyForm.fileSize(ele.target.files[0].size) ){
              this.$refs.formFileMatter.value = "";
              this.$refs.formFileAccording.value = "";
              this.s_alert("文件最大为50MB，请重新选择！");
              return false;
            }
            let fileObj = {
              obj: null,
              type:"",
              id:"",
              name:ele.target.files[0].name
            };
            if(this.verifyForm.isAudio(fileType)){ //音频文件 audio
              fileObj.type = "audio";
            }else if(this.verifyForm.isVideo(fileType)){//音频文件 video
              fileObj.type = "video";
            }else if(this.verifyForm.isDomFile(fileType)){ //文档文件
              fileObj.type = "dom";
            }else{
              this.s_alert("只能上传音频、视频、文档三种类型的文件！");
              return false;
            }

            fileObj.obj = ele.target.files[0];
            //console.log(fileType);
            if( selectType === "matter" ){
              this.matterFilListArr.push(fileObj);
              //console.log(this.matterFilListArr);
            }else if( selectType === "according" ){
              this.accordingFilListArr.push(fileObj);
              //console.log(this.accordingFilListArr);
            }

          },
          //下载附件
          downloadFile(obj){
            //console.log(obj);
            if( obj.id ){
              window.open(baseURL+"api/jp-TIFS-FileCenter-ms/file?businessId="+obj.id);
            }
          },
          //删除文件
          selectFilListDeleteFn(i,type){
            //console.log(i);
            let msg = confirm("是否删除该文件?");
            if( msg ){
              if( type === "matter" ){
                this.matterFilListArr.splice(i,1);
                this.$refs.formFileMatter.value = "";
                this.$refs.formFileAccording.value = "";
              }else if( type === "according" ){
                this.accordingFilListArr.splice(i,1);
                this.$refs.formFileMatter.value = "";
                this.$refs.formFileAccording.value = "";
              }
            }
          },
          //导出
          caseExport(){
            window.open(this.HOST + '/benchmark/export/' + this.selectRowId);
          },
          //清除缓存
          clearData(){
            this.paramsData={
              "attention": "",
              "attentionFile": "",
              "benchmarkStepModelList": [],
              "caseNature": "",
              "caseType": "",
              "createUser": "string",
              "emergencyFacilityModelList": [],
              "fieldSituation": "",
              "lawBasis": "",
              "lawBasisFile": "",
              "natureDetails": "",
              "expertsType": "",
            };
            this.matterReady = false;
            this.accordingReady =  false;
            this.activeResourceList = [];
            this.matterFilListArr = [];
            this.accordingFilListArr = [];
            this.caseTypeList = [];
            this.caseNatureList = [];
            this.natureDetailsList = [];
            this.resourceList = [];
            this.$refs.formFileMatter.value = "";
            this.$refs.formFileAccording.value = "";
            this.isResourceShow = false;
            this.clearSelect();
          },
          //关闭弹窗
          closeRoleModal(){
            this.clearData();
            this.$emit("closeRevampModal");
          }
        },
        computed:{
          //选择物资显示集合
          resourceText(){
            let str = "";
            if( this.activeResourceList.length > 0 ){
              for( let i=0;i<this.activeResourceList.length;i++ ){
                str += this.activeResourceList[i].name + "；"
              }
            }else {
              str = "未选择应急物资";
            }
            return str;
          }
        }
    }
</script>

<style lang="scss" scoped>
  .fadeInDown,.fadeOutUp,.fadeOutDown,.fadeInUp{
    animation-duration: .500s;
  }
  .caseTips{
    height: 150px !important;
    resize: none;
  }
  .text-class{
    width: 100% !important;
    &.text-default{
      height: 100px;
      margin-bottom: 45px;
    }
  }
  .file-select-body{
    width: 80px;
    height: 30px;
    line-height: 30px;
    position: relative;
    input{
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
    span{
      display: block;
      width: 100%;
      height: 100%;
      background-color: #31b0d5;
      text-align: center;
      color: #fff;
      border-radius: 4px;
      font-size: 14px;
    }
  }
  .modal-ctrl-body .modal-ctrl-main.even-row-ctrl{
    width: 1000px;
    margin-left: -500px;
    .modal-ctrl-content{
      box-sizing: border-box;
      padding: 0 5px;
      height: 500px;
      overflow-y: auto;
    }
  }
  .file-list-body{
    height:100%;
    .file-list{
      height: 100%;
      width: 100px;
      float: left;
      margin-right: 10px;
      position: relative;
      text-align: center;
      img{
        width: 50px;
      }
      p{
        overflow: hidden;
        height: 20px;
        text-overflow:ellipsis;
        white-space: nowrap;
        font-size: 12px;
      }
      a{
        font-size: 12px;
        color: #31b0d5;
        cursor: pointer;
        &:hover{
          text-decoration: none;
        }
      }
      .remove-file{
        position: absolute;
        z-index: 5;
        right: 23px;
        top: 0;
        color: rgba(0,0,0,0.8);
        cursor: pointer;
      }
    }
  }
  .modal-title{
    a.f-r{
      cursor: pointer;
    }
  }
</style>
